<template>

	<div class="statement">
		<div class="template" v-show="Loading">
			<div>
				<mt-spinner :type="3" :size="60"></mt-spinner>
			</div>
		</div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div class="flex main_zdy friend">
				<div v-for="item in statementname" @click="friendon(item.name,item.id)" :class="statementid == item.id?'on' :'friend_d'">{{item.name}}</div>
			</div>
			<div></div>
		</header>
		<div class="find">
			<div class="find_t">
				<img src="../assets/seek.png" />
				<input type="search" placeholder="搜索预估收益的订单号" ref='orderNo' />
			</div>
			<div class="find_b flex main_zdy sideAlign_center mainAlign_between">
				<!--<input type="date" ref='startTime'/> - <input type="date" ref='endTime'/>-->
				<div class="block">
					<el-date-picker v-model="startTime" type="date" placeholder="开始时间" size='small' value-format="yyyy-MM-dd">
					</el-date-picker>
				</div>
				<div class="block">
					<el-date-picker v-model="endTime" type="date" placeholder="结束时间" size='small' value-format="yyyy-MM-dd">
					</el-date-picker>
				</div>
				<div @click="query" class="query">查询</div>
			</div>
		</div>

		<div class="content">
			<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
				<div class="contentlist flex main_zdy" v-for="item in list" v-if='item.preTypename != "交易关闭"' @click="detailson(item.preId)">
					<div class="contentlist_img  flex side_sdx">
						<div class="flex main_zdy mainAlign_center">
							<span class="flex side_xds" v-if='item.preTypename == "转为累计"'>-￥</span>
							<span class="flex side_xds" v-if='item.preTypename != "转为累计"'>￥</span>
							<span>{{item.profitAmount}}</span>
						</div>
						<div class="flex mainAlign_center">{{item.preTypename}}</div>
					</div>
					<div class="contentlist_R">

						<div class="name">
							<i class="site">{{item.preIncomename}}</i> {{item.goodsName}}
						</div>

						<div class="price"><span>￥</span>{{item.actualPay}}</div>
						<div class="mark">
							<div>收益来源：{{item.userNickName}}</div>
						</div>
						<div class="flex main_zdy mainAlign_between sideAlign_center">
							<div class="mark">
								<div>订单编号：{{item.orderNo}}</div>
								<div>订单时间：{{item.orderTime}}</div>
							</div>
							<div class="number tag-read" :data-clipboard-text="item.orderNo" @click="copy">复制编号</div>
						</div>

					</div>
				</div>
				<div class="contentlist flex main_zdy" v-for="item in list" v-if='item.preTypename == "交易关闭"' @click="detailson(item.preId)">
					<div class="contentlist_img cutcontentlist_img flex side_sdx">
						<div class="flex main_zdy mainAlign_center">
							<span class="flex side_xds" v-if='item.preTypename == "转为累计"'>-￥</span>
							<span class="flex side_xds" v-if='item.preTypename != "转为累计"'>￥</span>
							<span>{{item.profitAmount}}</span>
						</div>
						<div class="flex mainAlign_center">{{item.preTypename}}</div>
					</div>
					<div class="contentlist_R">

						<div class="name">
							<i class="cutsite">{{item.preIncomename}}</i> {{item.goodsName}}
						</div>

						<div class="price cutprice"><span>￥</span>{{item.actualPay}}</div>

						<div class="flex main_zdy mainAlign_between sideAlign_center">
							<div class="cutmark">
								<!--<div>订单编号：{{item.orderNo}}</div>-->
								<div>订单时间：{{item.orderTime}}</div>
							</div>
							<!--<div class="number tag-read" :data-clipboard-text="item.orderNo" @click="copy">复制编号</div>-->
						</div>

					</div>
				</div>
			</ul>
		</div>

	</div>

</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import Clipboard from 'clipboard';
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				Loading: true,
				statementname: [{
					"name": '预估收益明细',
					"id": '001'
				}, {
					"name": '累计收益明细',
					"id": '002'
				}],
				statementid: '001',
				list: [], //数据列表
				index: 0,
				loading: '',
				orderNo: '', //订单
				startTime: '', //开始时间
				endTime: '', //结束时间
			}
		},
		created() {
			this.token = localStorage.getItem('token');

		},
		methods: {
			//导航退后
			retreat: function() {
				window.history.go(-1);
			},
			//点击明细分类
			friendon: function(name, id) {
				this.orderNo = '';
				this.startTime = '';
				this.endTime = '';
				this.statementid = id;
				this.index = 0;
				this.list = [];
				this.singInfo(this.index);
			},
			//点击查询
			query: function() {
				this.orderNo = this.$refs.orderNo.value;
				this.$refs.orderNo.value = '';
				this.index = 0;
				this.list = [];
				this.singInfo(this.index);
			},
			//详情跳转
			detailson: function(val) {
				this.$router.push({
					path: '/statementdetails?preId=' + val
				})
			},
			//列表数据
			singInfo(index) {
				this.Loading = true;
				var url = BaseUrl + 'users/preDetail?appId=wap' + '&token=' + this.token + '&preType=' + this.statementid + "&start=" + this.index + '&length=10' + '&orderNo=' + this.orderNo + '&startTime=' + this.startTime + '&endTime=' + this.endTime;
				this.$http.get(url).then(res => {
					this.Loading = false;
					if(res.data.code == '10000') {
						//						console.log(res)
						this.list = this.list.concat(res.data.data.list);
						if(this.list.length == res.data.data.total) {
							this.loading = true;
							Toast({
								message: "没有更多数据",
								position: 'middle',
								duration: 3000
							})
							return;
						} else {
							this.loading = false;
							this.index++;
						}
					}
				}).catch(error => {
					this.Loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})

			},
			loadMore() {
				this.loading = this.loading;
				if(this.loading == false) {
					setTimeout(() => {
						this.singInfo(this.index);
						this.loading = this.loading;
					}, 100);
				}
			},
			//复制订单号
			copy: function() {
				var clipboard = new Clipboard('.tag-read')
				clipboard.on('success', e => {
					Toast({
						message: '复制成功',
						position: 'middle',
						duration: 3000
					});
					clipboard.destroy()
				})
				clipboard.on('error', e => {
					Toast({
						message: '该浏览器不支持自动复制',
						position: 'middle',
						duration: 3000
					});
					clipboard.destroy()
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.statement {
		width: 100%;
		height: 100%;
		background: #F4F7FA;
		overflow: hidden;
	}
	
	.template {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		position: absolute;
		z-index: 99;
	}
	
	.template div {
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	
	.navigation {
		height: 1rem;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.24rem;
	}
	
	.navigation img {
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	
	.navigation {
		height: 1rem;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.24rem;
	}
	
	.navigation img {
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	
	.friend_d {
		padding: 0.15rem 0;
		margin: 0 0.665rem;
		font-family: PingFangSC-Medium;
		font-size: 0.3rem;
		color: #303133;
		letter-spacing: 0;
	}
	
	.on {
		padding: 0.15rem 0;
		box-sizing: border-box;
		margin: 0 0.665rem;
		font-family: PingFangSC-Medium;
		font-size: 0.3rem;
		color: #FF6742;
		letter-spacing: 0;
		border-bottom: 2px solid #FF6742;
	}
	
	.find {
		background: #FFFFFF;
		box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.12);
		padding: 0.3rem 0;
	}
	
	.find_t {
		padding: 0 0.3rem;
		position: relative;
		margin-bottom: 0.3rem;
	}
	
	.find_t img {
		width: 0.26rem;
		height: 0.26rem;
		position: absolute;
		top: 0.15rem;
		left: 0.5rem;
	}
	
	.find_t input {
		width: 100%;
		height: 0.6rem;
		background: #F4F7FA;
		border-radius: 100px;
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #8F9399;
		letter-spacing: 0;
		border: none;
		outline: none;
		text-indent: 0.62rem;
		line-height: 0.6rem;
	}
	
	.find_b {
		padding: 0 0.3rem;
	}
	
	.el-date-editor {
		width: 95%!important;
		padding-right: 0!important;
	}
	
	.block {
		width: 90%;
		box-sizing: border-box;
	}
	
	.find_b input {
		width: 2.2rem;
		height: 0.6rem;
		background: #F4F7FA;
		border-radius: 0.08rem;
		outline: none;
		border: none;
	}
	
	.query {
		width: 1.5rem;
		height: 0.6rem;
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #F87B7A;
		letter-spacing: 0;
		background: #FFFFFF;
		border: 1px solid #F87B7A;
		border-radius: 0.08rem;
		text-align: center;
		line-height: 0.6rem;
	}
	
	.content {
		height: 73.5%;
		overflow: hidden;
		margin: 2.5% 0.2rem 0 0.2rem;
	}
	
	.content ul {
		height: 100%;
		overflow-y: auto;
	}
	
	.contentlist {
		height: 2.1rem;
		margin-bottom: 0.2rem;
		background: #FFFFFF;
		box-shadow: 0 8px 12px 0 rgba(2, 2, 2, 0.04);
		border-radius: 0.02rem;
		background-size: 100% 100%;
	}
	
	.contentlist_img {
		width: 30%;
		height: 100%;
		background: url(../assets/Group.png);
		background-size: 100% 100%;
	}
	
	.cutcontentlist_img {
		width: 30%;
		height: 100%;
		background: url(../assets/couponmap_d.png);
		background-size: 100% 100%;
	}
	
	.contentlist_img div:nth-child(1) {
		margin-top: 0.5rem;
	}
	
	.contentlist_img div:nth-child(1) span:nth-child(1) {
		font-family: PingFangSC-Semibold;
		font-size: 0.3rem;
		color: #FFFFFF;
		letter-spacing: 0;
		padding-bottom: 0.1rem;
	}
	
	.contentlist_img div:nth-child(1) span:nth-child(2) {
		font-family: PingFangSC-Semibold;
		font-size: 0.5rem;
		color: #FFFFFF;
		letter-spacing: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.contentlist_img div:nth-child(2) {
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #FFFFFF;
		letter-spacing: 0;
	}
	
	.contentlist_R {
		width: 70%;
		box-sizing: border-box;
		padding: 0.22rem 0.22rem 0.16rem 0.2rem;
	}
	
	.name {
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #303133;
		letter-spacing: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.site {
		background: #F87B7A;
		border-radius: 0.3rem;
		font-family: PingFangSC-Regular;
		font-size: 0.1rem;
		color: #FFFFFF;
		letter-spacing: 0;
		font-style: normal;
		padding: 1px 10px;
	}
	
	.cutsite {
		background: #C0C4CC;
		border-radius: 0.3rem;
		font-family: PingFangSC-Regular;
		font-size: 0.1rem;
		color: #FFFFFF;
		letter-spacing: 0;
		font-style: normal;
		padding: 1px 10px;
	}
	
	.price {
		font-family: PingFangSC-Medium;
		font-size: 0.3rem;
		color: #F87B7A;
		letter-spacing: 0;
	}
	
	.price span {
		font-family: PingFangSC-Medium;
		font-size: 0.2rem;
		color: #F87B7A;
		letter-spacing: 0;
	}
	
	.cutprice {
		margin-bottom: 0.29rem;
		font-family: PingFangSC-Medium;
		font-size: 0.32rem;
		color: #C0C4CC;
		letter-spacing: 0;
	}
	
	.cutprice span {
		font-family: PingFangSC-Medium;
		font-size: 0.2rem;
		color: #C0C4CC;
		letter-spacing: 0;
	}
	
	.mark {
		width: 65%;
	}
	
	.mark div {
		font-family: PingFangSC-Regular;
		font-size: 0.2rem;
		color: #8F9399;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.cutmark {
		width: 100%;
	}
	
	.cutmark div {
		font-family: PingFangSC-Regular;
		font-size: 0.2rem;
		color: #8F9399;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.number {
		border: 1px solid #F87B7A;
		padding: 1px 5px;
		border-radius: 1rem;
		font-family: PingFangSC-Regular;
		font-size: 0.22rem;
		color: #F87B7A;
		letter-spacing: 0;
	}
</style>